<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Rod on a Ring</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="300"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Parameters ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Geometry Parameters ---
    const cx = canvas.width / 2;      // 250, Center of the ring (x)
    const R = 60;                     // Radius of the ring
    const l = 160;                    // Half-length of the rod
    const cy = R + 140;               // 200, Center of the ring (y), positioned for good layout
    const y_rod = cy - R;             // 140, Y-coordinate of the rod

    const x_A = cx - l;               // 90, x-coordinate of point A
    const x_B = cx + l;               // 410, x-coordinate of point B
    const x_C = cx;                   // 250, x-coordinate of point C

    // --- Helper function to draw a filled arrowhead ---
    function drawArrowHead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2.5);
        ctx.lineTo(-size, size / 2.5);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // --- Drawing the main components ---

    // 1. Draw the Ring (Circle)
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the Rod (Line AB)
    ctx.beginPath();
    ctx.moveTo(x_A, y_rod);
    ctx.lineTo(x_B, y_rod);
    ctx.stroke();

    // 3. Draw the Labels (A, B, C, l)
    ctx.fillText('A', x_A - 15, y_rod);
    ctx.fillText('B', x_B + 15, y_rod);
    ctx.fillText('C', x_C, y_rod - 15);
    ctx.fillText('l', x_A + l / 2, y_rod - 15);
    ctx.fillText('l', x_C + l / 2, y_rod - 15);

    // 4. Draw Arrow inside the Ring
    const innerArrowAngle = 225 * Math.PI / 180; // 45 degrees into the third quadrant
    const innerArrowLength = R * 0.5;
    const innerArrowStartX = cx;
    const innerArrowStartY = cy;
    const innerArrowEndX = innerArrowStartX + innerArrowLength * Math.cos(innerArrowAngle);
    const innerArrowEndY = innerArrowStartY + innerArrowLength * Math.sin(innerArrowAngle);
    
    ctx.beginPath();
    ctx.moveTo(innerArrowStartX, innerArrowStartY);
    ctx.lineTo(innerArrowEndX, innerArrowEndY);
    ctx.stroke();
    drawArrowHead(ctx, innerArrowEndX, innerArrowEndY, innerArrowAngle, 12);


    // 5. Draw Rotational Arrow at A (Counter-clockwise)
    const arrowA_start = { x: x_A, y: y_rod + 15 };
    const arrowA_end = { x: x_A, y: y_rod - 25 };
    const arrowA_cp = { x: x_A - 35, y: y_rod }; // Control point for the curve

    ctx.beginPath();
    ctx.moveTo(arrowA_start.x, arrowA_start.y);
    ctx.quadraticCurveTo(arrowA_cp.x, arrowA_cp.y, arrowA_end.x, arrowA_end.y);
    ctx.stroke();

    // Angle for arrowhead at the end of the quadratic curve
    const angleA = Math.atan2(arrowA_end.y - arrowA_cp.y, arrowA_end.x - arrowA_cp.x);
    drawArrowHead(ctx, arrowA_end.x, arrowA_end.y, angleA, 12);

    // 6. Draw Rotational Arrow at B (Clockwise)
    const arrowB_start = { x: x_B, y: y_rod - 15 };
    const arrowB_end = { x: x_B, y: y_rod + 25 };
    const arrowB_cp = { x: x_B + 35, y: y_rod }; // Control point for the curve

    ctx.beginPath();
    ctx.moveTo(arrowB_start.x, arrowB_start.y);
    ctx.quadraticCurveTo(arrowB_cp.x, arrowB_cp.y, arrowB_end.x, arrowB_end.y);
    ctx.stroke();

    // Angle for arrowhead at the end of the quadratic curve
    const angleB = Math.atan2(arrowB_end.y - arrowB_cp.y, arrowB_end.x - arrowB_cp.x);
    drawArrowHead(ctx, arrowB_end.x, arrowB_end.y, angleB, 12);

</script>
</body>
</html>